<template>
  <a-modal
    v-model:visible="show"
    title="取消工单"
    width="600px"
    height="600px"
    class="dispatchContainer"
    :confirm-loading="confirmLoading"
    @ok="ok"
  >
    <div ref="content" class="mx-auto">
      <a-tabs v-model:activeKey="serviceOrderCancelType" @change="handleChangeCancelType">
        <a-tab-pane key="CUSTOMER" tab="客户取消"></a-tab-pane>
        <a-tab-pane key="BUSINESS" tab="工程师取消" force-render></a-tab-pane>
      </a-tabs>
      <DynamicForm ref="dyForm" :model="model" :model-form-setting="modelFormSetting" :force-column="true" />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import { ref, watch, nextTick } from "vue";
import {
  FormItemData,
  FormItemComponentType,
  ShowCURDModalOptions,
  CURDModalEvent,
  CURDAction,
  DynamicFormExpose,
} from "/@/components/CURDDialog/models";
import { CancelApplyItem } from "/@/api/aiot/serviceApply/models";
import { getDictionaryByType } from "/@/api/aiot/dictionary";
import { enumToOptions } from "/@/utils/common";
import { CancelApplyModalOptions } from "/@/types/components";
import { Api, cancelServiceOrder, cancleWorkOrders } from "/@/api/aiot/serviceWorkOrder";
import { useCURD } from "/@/hooks/useCURD";
import { message } from "ant-design-vue";

const { t } = useI18n();
const confirmLoading = ref<boolean>(false);
const show = ref<boolean>(false);
const serviceOrderCancelType = ref<string>("CUSTOMER");
const props = defineProps<{
  options?: CancelApplyModalOptions;
  visible: boolean;
}>();
const model = ref<CancelApplyItem>({
  cancelReasonType: "",
  serviceOrderCancelType: "",
  cancelReason: "",
});
//第一次打开
const dyForm = ref<DynamicFormExpose>();
const emits = defineEmits(["ok", "update:visible"]);
let firstShow = true;
watch(show, (v) => {
  emits("update:visible", v);
  if (firstShow) {
    firstShow = false;
  }
});
watch(
  () => props.visible,
  async (v) => {
    show.value = v;
    if (!v) {
      reset();
    } else {
      nextTick(() => {
        dyForm.value?.initFormItemComponentData();
      });
    }
  }
);
watch(
  () => props.options,
  (v) => {
    if (!v) return;
  }
);
function handleChangeCancelType() {
  reset();
  nextTick(() => {
    dyForm.value?.initFormItemComponentData();
  });
}
function reset() {
  if (dyForm.value) {
    dyForm.value.resetFields();
  }
}
function ok() {
  if (!dyForm.value) return;
  dyForm.value
    .validate()
    .then(async (data: CancelApplyItem) => {
      let obj: CancelApplyItem = Object.assign(
        { workOrderCancelType: model.value.serviceOrderCancelType },
        props.options
      );
      Object.assign(obj, model.value);
      confirmLoading.value = true;
      // options.serviceOrderId ? applyOrder : wordOrder
      let req: boolean | null;
      if (props.options?.serviceOrderId) {
        obj.serviceOrderCancelType = serviceOrderCancelType.value;
        req = (await cancelServiceOrder(obj)) || null;
      } else {
        obj.workOrderCancelType = serviceOrderCancelType.value;
        req = (await cancleWorkOrders(obj)) || null;
      }
      confirmLoading.value = false;
      if (req) {
        emits("update:visible", false);
        message.success(t("common.operSuccess"));
        emits("ok");
      }
    })
    .catch(() => {});
}
async function getData() {
  let dictionaryType = serviceOrderCancelType.value === "CUSTOMER" ? "CUSTOMERCANCELTYPE" : "SERVICECANCELTYPE";
  let data = await getDictionaryByType({ dictionaryType });
  return data
    ? data.map((el) => ({
        label: el.dictionaryName,
        value: el.dictionaryCode,
      }))
    : [];
}
const modelFormSetting: FormItemData[] = [
  {
    label: t("aiot.serviceApply.cancelReasonType"),
    key: "cancelReasonType",
    required: true,
    type: FormItemComponentType.RADIO,
    getData,
    props: {
      options: [],
      getPopupContainer(node) {
        console.log(node);
        return node.parentNode;
      },
    },
    // pattern: PatternKey.name,
  },
  {
    key: "cancelReason",
    label: t("aiot.serviceApply.cancelReason"),
    type: FormItemComponentType.TEXTAREA,
    max: 250,
    props: {
      placeholder: t("common.pleaseInput"),
    },
    // pattern: PatternKey.name,
  },
  {
    key: "serviceOrderCancelType",
    hide: true,
  },
];
</script>
<style scoped lang="less">
:deep(.ant-tabs-tab-btn) {
  font-size: 16px;
}
</style>
